<template>
	<view>
		<view class="sqLoginTips" :style="{color:textColor}" @tap="handerEvent">
			<view class="loinLock flexAll" :style="{border:'8rpx solid ' + bgColor}">
				<view class="innerLock flexAll" :style="{backgroundColor:innerBgColor}">
					<view class="iconfont icon-loginLock" :style="{color:iconColor}"></view>
				</view>
			</view>
			<view>{{tipsMsg}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			tipsMsg:String,
			textColor:{
				type:String,
				default:'#4C5082'
			},
			iconColor:{
				type:String,
				default:'#8789B1'
			},
			bgColor:{
				type:String,
				default:'#EFEEFC'
			},
			innerBgColor:{
				type:String,
				default:'#EFEEFC'
			}
		},
		methods:{
			handerEvent(){
				this.$emit("handerEvent")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sqLoginTips{
		text-align: center;
		padding: 200rpx 0 50rpx;
		font-size: 28rpx;
		.loinLock{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			margin: 0 auto 20rpx;
			.innerLock{
				width: 138rpx;
				height: 138rpx;
				border-radius: inherit;
			}
			.icon-loginLock{
				font-size: 90rpx;
			}
		}
	}
</style>